<template>
	<view style="background-color: #fff">
		<view class="bar">
			<view class="local-text">
				<view>广州</view>
			</view>
			<view class="search-bar">
				<u-search placeholder="请输入小区或地铁站搜索" :show-action="false" :disabled="true" @click="gotoSearch"></u-search>
			</view>
		</view>
		
		<view class="rent-bt-box">
			<u-row gutter="20">
				<u-col span="6" style="">
					<u-button shape="circle" type="primary" @click="gotoRent">我是客户</u-button>
				</u-col>
				<u-col span="6" style="">
					<u-button shape="circle" type="primary" @click="gotoOwner">我是业主</u-button>
				</u-col>
			</u-row>
		</view>
		
		<!-- 轮播图 -->
		<!-- <view v-if="swipperData !== null"> -->
			<swipperPage :dataList="swipperData"></swipperPage>
		<!-- </view> -->

		<view class="rent-bt-box">
			<u-row gutter="20">
				<u-col span="6" style="">
					<u-button type="primary" shape="circle" @click="gotoRent()">我要租房</u-button>
				</u-col>
				<u-col span="6" style="">
					<u-button type="warning" shape="circle" @click="gotoSail">我要买房</u-button>
				</u-col>
			</u-row>
		</view>
		
		<view style="margin-left: 80rpx;">
			<!-- margin-left: 80rpx; -->
			<u-row style="margin-top: 0rpx;margin-left: 50rpx;">
				<u-col :span="3">
					<view @click="moveHoom()">
						<view class="browse-record">
							<u-icon class="iconfont icon-liulanjilu1"></u-icon>	
						</view>
						<view style="margin-left: 0rpx;">
							<span>搬家</span>
						</view>
					</view>
				</u-col>
				<u-col :span="3">
					<view @click="procter()">
						<view class="browse-record">
							<u-icon class="iconfont icon-yuyue"></u-icon>
						</view>
						<view style="margin-left: 0rpx;">
							<span>保洁</span>
						</view>
					</view>
				</u-col>
				<u-col :span="3">
					<view @click="maintenance()">
						<view class="browse-record">
							<u-icon class="iconfont icon-qianbao"></u-icon>
						</view>
						<view style="margin-left: 0rpx;">
							<span>维修</span>
						</view>
					</view>
				</u-col>
				<u-col :span="3">
					<view @click="decorate()">
						<view class="browse-record">
							<u-icon class="iconfont icon-youhuiquan1"></u-icon>
						</view>
						<view style="margin-left: 0rpx;">
							<span>装修</span>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view style="margin-left: 100rpx;">
			<!-- margin-left: 80rpx; -->
			<u-row style="margin-top: 0rpx;margin-left: 50rpx;">
				<u-col :span="4">
					<view @click="rentProcess()">
						<view class="browse-record">
							<u-icon class="iconfont icon-zufangyuechifangzixianxing"></u-icon>	
						</view>
						<view style="margin-left: -20rpx;">
							<span>租房流程</span>
						</view>
					</view>
				</u-col>
				<u-col :span="4">
					<view @click="sailProcess()">
						<view class="browse-record">
							<u-icon class="iconfont icon-maifang2"></u-icon>
						</view>
						<view style="margin-left: -20rpx;">
							<span>买房流程</span>
						</view>
					</view>
				</u-col>
				<u-col :span="4">
					<view @click="hooseWay()">
						<view class="browse-record">
							<u-icon class="iconfont icon-maifang"></u-icon>
						</view>
						<view style="margin-left: -20rpx;">
							<span>房子妙招</span>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<!-- P-->
		<view v-for="(item,index) in hourseDataList" :key="index">
			<view v-if="item.plateName === '最多人看'">
				<mostPeopleSee :dataList="item"></mostPeopleSee>
			</view>
			<view v-if="item.plateName === '为你推荐'">
				<recommandForYou :dataList="item"></recommandForYou>
			</view>
			<view v-if="item.plateName === '最新发布'">
				<guessYourLike :dataList="item"></guessYourLike>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import mostPeopleSee from '../components/palte/mostPeopleSee.vue'
	import guessYourLike from '../components/palte/guessYourLike.vue'
	import recommandForYou from '../components/palte/recommandForYou.vue'
	import swipperPage from '../components/palte/swipperPage.vue'
	// import loginUtils from '../../utils/loginUtils.js'
	export default {
		data() {
			return {
				swipperPlatId: '',
				plateList: [],
				swipperData: null,
				hourseDataList: []
			}
		},
		beforeCreate() {
			// loginUtils(null)
		},
		onLoad() {
			this.getHouseDataList();
		},
		// onShow() {
		// 	this.getHouseDataList();
		// },
	
		methods: {
			//刷新
			onRefresh() {
				//在当前页面显示导航条加载动画
				wx.showNavigationBarLoading();
				//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
				wx.showLoading({
					title: '刷新中...',
				})
				this.getData();
			},
			//网络请求，获取数据
			getData() {
				this.getHouseDataList()
				wx.request({
					url: '',
					//网络请求执行完后将执行的动作
					complete(res) {
						//隐藏loading 提示框
						wx.hideLoading();
						//隐藏导航条加载动画
						wx.hideNavigationBarLoading();
						//停止下拉刷新
						wx.stopPullDownRefresh();
					}
				})
			},
			/**
			 * 页面相关事件处理函数--监听用户下拉动作
			 */
			onPullDownRefresh: function() {
				//调用刷新时将执行的方法
				this.onRefresh();
			},

			//获取房屋列表信息
			async getPlateList() {
				let res = await this.$request({
					url: '/v1/plate/list',
				})
				// console.log(res)
				if (!res.isSuccess) {
					console.log(res.message)
				}
				this.plateList = res.data

			},
			async getHouseDataList() {
				this.hourseDataList = []
				await this.getPlateList()
				// console.log(this.plateList)
				var recommandId = ''
				for (let i = 0; i < this.plateList.length; i++) {
					if (this.plateList[i].name === '最新发布') {
						recommandId = this.plateList[i].id
					}
					if(this.plateList[i].name === '轮播图'){
						this.swipperPlatId = this.plateList[i].id
					}
				}
				// console.log(recommandId)
				for (let i = 0; i < this.plateList.length; i++) {
					let houseItem = {}
					// this.$set(houseItem, "recommandId", recommandId)
					// this.$set(houseItem, "plateName", this.plateList[i].name)
					let houseData = await this.$request({
						url: '/v1/house/list?plateId=' + this.plateList[i].id + '&isApproved=1'
					})
					// this.$set(houseItem, "houseInfo", houseData.data)
					houseItem = {
						"recommandId": recommandId,
						"plateName": this.plateList[i].name,
						"houseInfo": houseData.data,
						"isShowPlateName": true
					}
					this.hourseDataList.push(houseItem)
				}
				// console.log(this.hourseDataList)
				
				//获取轮播图的信息
				this.getSwipperInfo(this.swipperPlatId,recommandId)
				
			},
			//获取轮播图的信息
			async getSwipperInfo(swipperId,recommandId){
				let houseItem = {}
				// this.$set(houseItem, "recommandId", recommandId)
				// this.$set(houseItem, "plateName", this.plateList[i].name)
				let houseData = await this.$request({
					url: '/v1/house/list?plateId=' + swipperId + '&isApproved=1'
				})
				// this.$set(houseItem, "houseInfo", houseData.data)
				houseItem = {
					"recommandId": recommandId,
					"houseInfo": houseData.data,
				}
				this.swipperData = houseItem
				// console.log("this.swipperData",this.swipperData)
			},
			//搬家
			moveHoom(){
				wx.navigateTo({
					url: '../components/myService'
				})
			},
			//保洁
			procter(){
				wx.navigateTo({
					url: '../components/myService'
				})
				// wx.showToast({
				// 	title: '暂未开放',
				// 	icon: 'none',
				// 	duration:1000
				// })
			},
			maintenance(){
				wx.navigateTo({
					url: '../components/myService'
				})
			
			},
			decorate(){
				wx.navigateTo({
					url: '../components/myService'
				})
			},
			gotoSearch() {
				console.log("点了")
				wx.navigateTo({
					url: '../components/search'
				})
			},
			gotoOwner(){
				wx.switchTab({
					url: '/pages/ownerPage/ownerPage'
				})
			},
			gotoRent(){
				wx.switchTab({
					url: '/pages/rentPage/rentPage'
				})
			},
			gotoSail(){
				wx.switchTab({
					url: '/pages/sellPage/sellPage'
				})
			},
			//买房流程
			sailProcess(){
				wx.navigateTo({
					url: '../components/rentProcess'
				})
			},
			rentProcess(){
				wx.navigateTo({
					url: '../components/rentProcess'
				})
			},
			//房子妙招
			hooseWay(){
				wx.showToast({
					title: '暂未开放',
					icon: 'none',
					duration:1000
				})
			},
		},
		components: {
			mostPeopleSee,
			guessYourLike,
			recommandForYou,
			swipperPage
		}

	}
</script>

<style lang="scss">
	page{
		width: auto;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.search-bar {
		flex-grow: 1;
		padding-right: 20rpx;
	}

	.local-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		width: 120rpx;
	}

	.bar {
		padding-top: 20rpx;
		display: flex;
	}

	.swiper-img {
		margin-top: 20rpx;
	}

	.swiper-list {
		height: 320rpx;
		padding: 10rpx;
	}

	uni-swiper {
		height: 320rpx;
	}

	.rent-bt-box {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}
	
	.iconfont{
		font-size: 60rpx !important;
	}
</style>
